<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <el-row :gutter="20" style="min-height:50px; padding: 10px 30px 0px 30px;">
        <el-form :inline="true" size="medium">
          <el-row :gutter="20">
            <el-form-item label="行政区划">
              <el-cascader
                v-model="cityValue"
                :options="options"
                @change="handleChange"
                :props="{ checkStrictly: true }"
                style="width: 350px;"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="统计月份" style="margin-left:30px; ">
              <el-date-picker
                v-model="statMonth"
                type="month"
                value-format="yyyyMM"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getSstatentselfcheck">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="sendZCSms">发送自查提醒短信</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px;">
      <el-table
        :data="statTableData"
        style="width: 100%"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="区域"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="entNum"
          label="辖区企业家数"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="selfcheckEntNum"
          label="已自查企业家数"
          width="90"
        >
        </el-table-column>
        <el-table-column
          label="未自查企业家数"
          width="90"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="getNoselfchecklist(scope.row)">
              {{ scope.row.notSelfcheckEntNum }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="selfcheckPre"
          label="自查率(%)"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="hdEntNum"
          label="发现隐患家数"
        >
        </el-table-column>
        <el-table-column
          prop="hdNum"
          label="发现隐患总数"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="generalHdNum"
          label="发现一般隐患总数"
        >
        </el-table-column>
        <el-table-column
          prop="majorHdNum"
          label="发现较大隐患数"
        >
        </el-table-column>
        <el-table-column
          prop="greatHdNum"
          label="发现重大隐患数"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="未自查企业"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-pagination
        layout="total,prev, pager, next"
        :current-page="dialogTableData.current"
        :total="dialogTableData.total"
        :page-size="dialogTableData.size"
        @current-change="pageChange"
      >
      </el-pagination>
      <el-table
        :data="dialogTableData.records"
        style="width: 100%;"
        size="small"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="entFullName"
          label="企业名称"
        >
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="行政区划"
        >
        </el-table-column>
        <el-table-column
          prop="industryTypeName"
          label="行业类别"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="linkPsnName"
          label="联系人"
          width="90"

        >
        </el-table-column>
        <el-table-column
          prop="linkPsnTel"
          label="联系电话"

        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">返回</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>
import { sstatentselfcheck, deptTree, noselfchecklist ,sendSmsZcManual} from '@/api/safe'

export default {
  name: 'SelfCheck',
  data() {
    return {
      cityValue: ['33', '3302', '330285'],
      options: [],
      statMonth: '',
      cityCode: '330285',
      statTableData: [],
      dialogVisible: false,
      dialogTableData: {
        records: [],
        current: 1,
        size:10,
        total:0
      },
      listLoading:false,
      selectRow:{}
    }
  },
  mounted() {
    this.getDeptTree()
    var now = new Date()
    var year = now.getFullYear() //得到年份
    var month = now.getMonth() + 1 //得到月份
    this.statMonth = year + '' + month
    console.info(this.statMonth)
    this.getSstatentselfcheck()
  },
  methods: {
    getDeptTree() {
      deptTree().then(res => {
        console.log(res)
        this.options = res
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    handleChange(value) {
      console.info(value)
      this.cityCode = value[value.length - 1]
      console.info(this.cityCode)
    },
    getSstatentselfcheck() {
      sstatentselfcheck(this.cityCode, this.statMonth).then(res => {
        this.statTableData = res
        console.info(res)
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    getNoselfchecklist(row) {
      this.dialogVisible = true
      this.listLoading = true
      this.selectRow=row
      console.log(row)
      noselfchecklist(row.cityCode,this.statMonth,this.dialogTableData.current).then(res=>{
        console.info(res)
        this.listLoading = false
        this.dialogTableData.current=res.current
        this.dialogTableData.records=res.records
        this.dialogTableData.total=res.total
      }).catch(res=>{
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    sendZCSms(){
      sendSmsZcManual(this.cityCode,this.statMonth).then(res=>{
        this.$message.success("短信发送成功")
      }).catch(res=>{
        this.$message.error(res.message)
      })
    },
    pageChange(page){
      this.dialogTableData.current=page
      this.getNoselfchecklist(this.selectRow)
    }
  }
}
</script>

<style scoped>

</style>
